<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 4.0
  Author: PIXINVENT
  Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <!--<meta name="description"-->
    <!--content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">-->
    <!--<meta name="keywords"-->
    <!--content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">-->
    <title>BAUHINIA SQUARE Admin</title>
    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->
    <!-- CORE CSS-->
    <link href="css//materialize.css" type="text/css" rel="stylesheet">
    <link href="css//style.css" type="text/css" rel="stylesheet">
    <!-- Custome CSS-->
    <link href="css/custom/custom.css" type="text/css" rel="stylesheet">
    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="vendors/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
    <link href="vendors/flag-icon/css/flag-icon.min.css" type="text/css" rel="stylesheet">

    <!-- PARSLEY CSS -->
    <link href="css/parsley.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>

<body class="active-rule-settings">
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed" th:include="header :: header"></div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!-- START LEFT SIDEBAR NAV-->
        <aside id="left-sidebar-nav" th:include="leftNavigation :: navigation">
        </aside>
        <!-- END LEFT SIDEBAR NAV-->
        <!-- //////////////////////////////////////////////////////////////////////////// -->
        <!-- START CONTENT -->
        <section id="content">
            <!--breadcrumbs start-->
            <div id="breadcrumbs-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col s10 m6 l6">
                            <h5 class="breadcrumbs-title">积分规则</h5>
                            <ol class="breadcrumbs">
                                <li><a href="index.html">上海紫荆广场</a>
                                </li>
                                <li><a href="#">规则设置</a>
                                </li>
                                <li class="active">规则 录入</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!--breadcrumbs end-->
            <!-- //////////////////////////////////////////////////////////////////////////// -->
            <!--start container-->
            <div class="container">
                <!--start tab-->
                <div id="basic-tabs" class="section">
                    <!--<h4 class="header">积分规则</h4>-->
                    <div class="row">
                        <!--<div class="col s12">-->
                        <!--<p>When you click on each tab, only the container with the corresponding tab id will become-->
                        <!--visible.</p>-->
                        <!--</div>-->
                        <div class="col s12">
                            <div id="test1" class="col s12">
                                <!-- ////////////////////////////////////// simple form start ////////////////////////////////////// -->
                                <form method="POST" enctype="multipart/form-data" action="/pointsSettings"
                                      id="pointsForm"
                                      data-parsley-validate>
                                    <div class="row">
                                        <div class="col s0 m0 l2"></div>
                                        <div class="col s12 m12 l8">
                                            <div class="card-panel" style="margin-top:2em;">
                                                <div class="row">
                                                    <div class="col s12">
                                                        <p>升级送积分规则</p>
                                                        <div class="divider" style="margin-bottom:1em;"></div>
                                                    </div>
                                                </div>
                                                <div class="row" th:each="pointsMap:${pointsRules}">
                                                    <div class="input-field col s12" th:object="${pointsMap}">
                                                        <i class="material-icons prefix">star</i>
                                                        <input type="number" id="level-points" name="level-points"
                                                               placeholder="送100积分"
                                                               class="validate"
                                                               min="10"
                                                               data-parsley-type="integer"
                                                               data-parsley-type-message="必须是整数"
                                                               data-parsley-min="10" data-parsley-min-message="数值低于最小范围"
                                                               data-parsley-max="99999999"
                                                               data-parsley-max-message="数值超出最大范围"
                                                               th:value="*{points}" equired
                                                               data-parsley-required
                                                               data-parsley-required-message="不能为空">
                                                        <label for="level-points" th:text="*{level_name}"></label>
                                                        <input type="hidden" th:value="*{level_id}" name="level-id">
                                                        <input type="hidden" th:value="*{level_name}" name="level-name">
                                                    </div>
                                                </div>
                                                <div class="row" style="margin-top:1em">
                                                    <div class="col s12">
                                                        <!-- <a class="waves-effect waves-light btn right"><i class="material-icons right">send</i>保存</a> -->
                                                        <!--th:onclick="'javascript:doCheck(' + ${vclerk?.vc_id} + ',2)'">-->
                                                        <a href="#" th:onclick="'jvascript:savePoints()'"
                                                           class="waves-effect waves-light btn right"><i
                                                                class="material-icons right">send</i>保&emsp;存
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col s0 m0 l2"></div>
                                    </div>
                                    <input type="hidden" id="pointsJson" name="pointsJson" value="">
                                </form>
                                <!-- ////////////////////////////////////// simple form end ////////////////////////////////////// -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s0 m0 l2"></div>
                            <div class="col s12 m12 l8">
                                <div class="card-panel" style="margin-top:2em;">
                                    <div class="row">
                                        <div class="col s12">
                                            <p>注册奖励规则</p>
                                            <div class="divider" style="margin-bottom:1em;"></div>
                                        </div>
                                </div>
                                    <div class="row">
                                        <div class="col s12">
                                            <ul class="tabs tab-demo z-depth-1">
                                                <li class="tab col s3">
                                                    <a th:class="${registerReward?.reward_type==0}?'active'" href="#test11" id="register-points">积分</a>
                                                </li>
                                                <li class="tab col s3">
                                                    <a th:class="${registerReward?.reward_type==1}?'active'" href="#test2" id="register-coupon">优惠券</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col s12" style="margin-top:1em;">
                                            <div id="test11" class="col s12">
                                                <input type="number" id="register-points-text" th:value="${registerReward?.reward_type==0}?${registerReward?.reward_value}:'0'" step="1" min="0">
                                            </div>
                                            <div id="test2" class="col s12">
                                                <select id="register-coupons-select" name="register-coupons-select">
                                                    <option th:each="coupon:${coupons}" th:value="${coupon?.coupon_id}" th:text="${coupon?.coupon_name}"></option>
                                                </select>
                                                <div class="input-field col s5">
                                                    <i class="material-icons prefix">today</i>
                                                    <input type="text" class="validate"
                                                           th:value="${registerReward?.reward_start}"
                                                           id="issueStart" name="issueStart"
                                                           placeholder="1980-01-01"
                                                           equired data-parsley-required
                                                           data-parsley-required-message="不能为空"
                                                           pattern="(([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])))"
                                                           data-parsley-pattern="(([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])))"
                                                           data-parsley-pattern-message="字段内容不是正确的日期格式">
                                                    <label for="issueStart">生效日期</label>
                                                </div>
                                                <div class="input-field col s1">
                                                    <span style="margin-top:1.2em;width:100%;text-align:center;display:inline-block;">至</span>
                                                </div>
                                                <div class="input-field col s5">
                                                    <input type="text" class="validate"
                                                           th:value="${registerReward?.reward_end}"
                                                           id="issueEnd" name="issueEnd"
                                                           placeholder="1980-12-01"
                                                           equired data-parsley-required
                                                           data-parsley-required-message="不能为空"
                                                           pattern="(([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])))"
                                                           data-parsley-pattern="(([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])))"
                                                           data-parsley-pattern-message="字段内容不是正确的日期格式">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <a href="#" th:onclick="'jvascript:saveRegister()'"
                                                   class="waves-effect waves-light btn right" style="margin-right:1em;"><i
                                                        class="material-icons right">send</i>保&emsp;存
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s0 m0 l2"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s0 m0 l2"></div>
                            <div class="col s12 m12 l8">
                                <div class="card-panel" style="margin-top:2em;">
                                    <div class="row">
                                        <div class="col s12">
                                            <p>完善资料奖励规则</p>
                                            <div class="divider" style="margin-bottom:1em;"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col s12">
                                            <ul class="tabs tab-demo z-depth-1">
                                                <li class="tab col s3">
                                                    <a th:class="${completeReward?.reward_type==0}?'active'" href="#test211" id="complete-points">积分</a>
                                                </li>
                                                <li class="tab col s3">
                                                    <a th:class="${completeReward?.reward_type==1}?'active'" href="#test22" id="complete-coupon">优惠券</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col s12" style="margin-top:1em;">
                                            <div id="test211" class="col s12">
                                                <input type="number" id="complete-points-text" th:value="${completeReward?.reward_value}" step="1" min="0">
                                            </div>
                                            <div id="test22" class="col s12">
                                                <select id="complete-coupons-select" name="complete-coupons-select">
                                                    <option th:each="coupon:${coupons}" th:value="${coupon?.coupon_id}" th:text="${coupon?.coupon_name}"></option>
                                                </select>
                                            </div>
                                            <div class="row">
                                                <a href="#" th:onclick="'jvascript:saveComplete()'"
                                                   class="waves-effect waves-light btn right" style="margin-right:1em;"><i
                                                        class="material-icons right">send</i>保&emsp;存
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s0 m0 l2"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <div class="row">
                            <div class="col s0 m0 l2"></div>
                            <div class="col s12 m12 l8">
                                <div class="card-panel" style="margin-top:2em;">
                                    <div class="row">
                                        <div class="col s12">
                                            <p>活动签到奖励规则</p>
                                            <div class="divider" style="margin-bottom:1em;"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col s12">
                                            <ul class="tabs tab-demo z-depth-1">
                                                <li class="tab col s3">
                                                    <a th:class="${signInReward?.reward_type==0}?'active'" id="activity-points" href="#test311">积分</a>
                                                </li>
                                                <li class="tab col s3">
                                                    <a th:class="${signInReward?.reward_type==1}?'active'" id="activity-coupon" href="#test32">优惠券</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col s12" style="margin-top:1em;">
                                            <div id="test311" class="col s12">
                                                <input type="number" id="activity-points-text" th:value="${activityReward?.reward_value}" step="1" min="0">
                                            </div>
                                            <div id="test32" class="col s12">
                                                <select id="activity-coupons-select" name="activity-coupons-select">
                                                    <option th:each="coupon:${coupons}" th:value="${coupon?.coupon_id}" th:text="${coupon?.coupon_name}"></option>
                                                </select>
                                            </div>
                                            <div class="row">
                                                <a href="#" th:onclick="'jvascript:saveActivity()'"
                                                   class="waves-effect waves-light btn right" style="margin-right:1em;"><i
                                                        class="material-icons right">send</i>保&emsp;存
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col s0 m0 l2"></div>
                        </div>
                    </div>
                </div>

                <form id="form-reward" action="/rewardSettings" method="post">
                    <input type="hidden" id="rewardCategory" name="rewardCategory" value="">
                    <input type="hidden" id="rewardType" name="rewardType" value="">
                    <input type="hidden" id="rewardValue" name="rewardValue" value="">
                    <input type="hidden" id="rewardStart" name="rewardStart" value="">
                    <input type="hidden" id="rewardEnd" name="rewardEnd" value="">
                </form>
            </div>

            <div class="row" style="margin-bottom:3em;">
                <!--<div class="col s12">-->
                <!--<p>When you click on each tab, only the container with the corresponding tab id will become-->
                <!--visible.</p>-->
                <!--</div>-->
                <div class="col s12">
                    <div id="" class="col s12">
                        <!-- ////////////////////////////////////// simple form start ////////////////////////////////////// -->
                        <form method="POST" enctype="multipart/form-data" action="/coefficientSettings"
                              data-parsley-validate>
                            <div class="row">
                                <div class="col s0 m0 l2"></div>
                                <div class="col s12 m12 l8">
                                    <div class="card-panel" style="margin-top:2em;">
                                        <div class="row">
                                            <div class="col s12">
                                                <p>积分系数规则</p>
                                                <div class="divider" style="margin-bottom:1em;"></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="input-field col s12">
                                                <i class="material-icons prefix">donut_large</i>
                                                <input type="number" id="pointsCoefficient" name="pointsCoefficient"
                                                       placeholder="积分系数"
                                                       class="validate"
                                                       min="0.1" step="0.01"
                                                       data-parsley-type="number"
                                                       data-parsley-min="0.1" data-parsley-min-message="数值低于最小范围"
                                                       data-parsley-max="99999999.99"
                                                       data-parsley-max-message="数值超出最大范围"
                                                       th:value="${coefficient}" equired
                                                       data-parsley-required
                                                       data-parsley-required-message="不能为空">
                                                <label for="pointsCoefficient">积分系数</label>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top:1em">
                                            <div class="col s12">
                                                <!-- <a class="waves-effect waves-light btn right"><i class="material-icons right">send</i>保存</a> -->
                                                <button type="submit"
                                                        class="waves-effect waves-light btn right"><i
                                                        class="material-icons right">send</i>保&emsp;存
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col s0 m0 l2"></div>
                            </div>
                        </form>
                        <!-- ////////////////////////////////////// simple form end ////////////////////////////////////// -->
                    </div>
                </div>
            </div>
            <!--end tab-->
        </section>
    </div>
    <!--end container-->
    </section>
    <!-- END CONTENT -->
    <!-- START RIGHT SIDEBAR NAV-->
    <aside id="right-sidebar-nav" th:include="rightSidebarNav :: right-sidebar-nav">
    </aside>
    <!-- END RIGHT SIDEBAR NAV-->
</div>
<!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer gradient-45deg-light-cyan-cyan" th:include="footer :: footer">
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<!--<script type="text/javascript" src="vendors/jquery-3.2.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/parsley.js/2.8.0/parsley.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="js/plugins.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="js/custom-script.js"></script>
<script th:inline="javascript">

    var coupons = /*[[${coupons}]]*/ undefined
    var couponsLength = 0;
    var registerType = [[${registerReward?.reward_type}]];
    var completeType = 0;
    var activityType = 0;

    $(document).ready(function () {
        if (coupons) {
            couponsLength = coupons.length;
            if([[${registerReward?.reward_type}]] == 1){
                var value = [[${registerReward?.reward_value}]];
                $('#register-coupons-select').val(value);
            }
        }

        $('input.autocomplete').autocomplete({
            data: {
                "Apple": null,
                "肯德基": null,
                "麦当劳": null,
                "麦乐鸡": null,
                "肯花钱": null,
                "大大所多所": null,
                "离开家": null,
                "Apple": null,
                "Microsoft": null,
                "Google": 'https://placehold.it/250x250'
            },
            limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
            onAutocomplete: function (val) {
                // Callback function when value is autcompleted.
                log('select completed')
            },
            minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
        })

        $("#register-points").on('click', function(event) {
            registerType = 0
        })
        $("#register-coupon").on('click', function(event) {
            registerType = 1
        })

        $("#complete-points").on('click', function(event) {
            completeType = 0
        })
        $("#complete-coupon").on('click', function(event) {
            completeType = 1
        })

        $("#activity-points").on('click', function(event) {
            activityType = 0
        })
        $("#activity-coupon").on('click', function(event) {
            activityType = 1
        })

        $('select').material_select();
    })

    function savePoints() {
        var values = $('[name="level-points"]')
        var ids = $('[name="level-id"]')
        var names = $('[name="level-name"]')

        var objs = []

        for (var i = 0; i < values.length; i++) {
            var obj = {
                'level_id': parseInt($(ids[i]).val()),
                'level_name': $(names[i]).val(),
                'points': parseInt($(values[i]).val())
            }

            objs.push(obj)
        }

        log(JSON.stringify(objs))
        $('#pointsJson').val(JSON.stringify(objs))

        $('#pointsForm').submit()
    }

    function saveRegister() {
        $('#rewardCategory').val(8)
        $('#rewardType').val(registerType)

        if (registerType == 1) {
            if (!couponsLength) return false

            $('#rewardValue').val($('#register-coupons-select').val())
            $('#rewardStart').val($('#issueStart').val())
            $('#rewardEnd').val($('#issueEnd').val())
        } else {
            log($('#register-points-text').val())
            $('#rewardValue').val(parseInt($('#register-points-text').val()))
        }

        $('#form-reward').submit()
    }

    function saveComplete() {

        $('#rewardCategory').val(9)
        $('#rewardType').val(completeType)

        if (completeType == 1) {
            if (!couponsLength) return false

            $('#rewardValue').val($('#complete-coupons-select').val())
        } else {
            $('#rewardValue').val(parseInt($('#complete-points-text').val()))
        }

        $('#form-reward').submit()
    }

    function saveActivity() {

        $('#rewardCategory').val(9)
        $('#rewardType').val(activityType)

        if (activityType == 1) {
            if (!couponsLength) return false

            $('#rewardValue').val($('#activity-coupons-select').val())
        } else {
            $('#rewardValue').val($('#activity-points-text').val())
        }

        $('#form-reward').submit()
    }

</script>
</body>

</html>